<!--
 * @Author: 王晓崧
 * @Date: 2022-07-07 08:18:47
 * @LastEditTime: 2022-07-07 08:32:38
 * @FilePath: \Client\src\views\home\study.vue
 * @Description: 
 * 
-->
<template>
  <div class="home_left">
<!--    <div class="left_top">-->
<!--      <div v-if="false">-->
<!--        <div class="left_top_button">-->
<!--          <a-button @click="getHottestPost">热榜</a-button>-->
<!--        </div>-->
<!--        <div class="left_top_button">-->
<!--          <a-button @click="getLatestPost">最新</a-button>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div v-else>-->
<!--        <div class="left_top_button">-->
<!--          <a-button @click="getFollowPost">关注</a-button>-->
<!--        </div>-->
<!--        <div class="left_top_button">-->
<!--          <a-button @click="getPersonalizedPost">推荐</a-button>-->
<!--        </div>-->
<!--        <div class="left_top_button">-->
<!--          <a-button @click="getHottestPost">热榜</a-button>-->
<!--        </div>-->
<!--        <div class="left_top_button">-->
<!--          <a-button @click="getLatestPost">最新</a-button>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

    <div>
      <post-list :list="postList"></post-list>
    </div>

  </div>
  <div class="home_right">
    <task-list></task-list>
    <label-list @add="search"></label-list>
  </div>
</template>
<script>
import PostList from "../../components/score/PostList.vue";
import TaskList from "../../components/score/TaskList.vue";
import LabelList from "@/components/score/LabelList.vue";

import {ref, reactive} from "vue";
import {get, put, post, tip, del} from "@/common";
import {message} from 'ant-design-vue';

export default {

  components: {LabelList, TaskList, PostList},

  data() {
    return {}
  },

  setup() {
    const postList = ref({});

    const getPostList = (area, type, label) => {
      get("/flow/" + area + "/" + type + "/" + label).then((res) => {
        postList.value = res.data;
      })
    };
    getPostList(1, 0, 0);

    const getLatestPost = () => {
      get("/flow/latest").then((res) => {
        postList.value = res.data;
      })
    };

    const getHottestPost = () => {
      get("/flow/hottest").then((res) => {
        postList.value = res.data;
      })
    };

    const getFollowPost = () => {
      get("/flow/byFollow").then((res) => {
        postList.value = res.data;
      })
    };

    const getPersonalizedPost = () => {
      get("/flow/personalized").then((res) => {
        postList.value = res.data;
      })
    };

    const search=(value)=>{
      getPostList(1, 0, value);
    };

    return {
      postList,
      getLatestPost,
      getHottestPost,
      getFollowPost,
      getPersonalizedPost,
      search,
    };
  },
}


</script>

<style scoped>
.home_left {
  width: 68%;
  height: 100px;
  float: left;
  position: relative;
}

.home_right {
  width: 30%;
  height: 100%;
  float: right;
  position: relative;
}

.left_top {
  background-color: rgb(238, 238, 238);
  height: 50px;
}

.left_top_button {
  width: 80px;
  height: 50px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}


</style>


